<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf - 8">
        <meta name = "viewport" content="
        initial-scale= 1.0,maximum-scale=1.0,user-scalable=no">
        <title>

        </title>
        <script src="C:/Users/24098/Desktop/978-7-302-48199-7《HTML5 App应用开发教程》教辅/配套资源包/chapter06/scripts/jquery-3.1.1.min.js">
        </script>
<style>
    #mydiv{
        padding: 10px;
        border: 2px dashed red;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 10px;		
    }
    #mydiv input{
        width: 70%;
        height: 25px;
        margin-bottom: 10px;
        font-size: 15px;
    }
    #myobj{
        border:1px solid orange;			
        background-color: #ccc;			
    }
</style>    
</head>
    
    <body>
        <div id="mydiv">
            
        </div>
<input type="button" value = "附加到尾部" id="btnAppend"/>
<input type="button" value = "附加到头部" id="btnPrepend"/>
<input type="button" value = "在前面插入" id="btnBefore"/>
<input type="button" value = "在后面插入" id="btnAfter"/>

        <script>
            
            $(function(){
                var $div = $("#mydiv");
                var count = 1;
                $('<input type = "text" value = "这是目标节点" id = "myobj"/>').appendTo($div)
                var $objNode =$("#myobj");
                $("#btnAppend").click(function(){ var $input = createInput();
                    $input.appendTo($div);});
                $("#btnPrepend").click(function(){
                    var $input = createInput();
                    $div.prepend($input);
                });
                $("#btnBefore").click(function(){
                    var $input = createInput();
                    $objNode.before($input);
                });
                $("#btnAfter").click(function(){
                    var $input = createInput();
                    $objNode.after($input);
                });
                function createInput(){
                var $input = $("<input type = 'text'/>");
                $input.val(count++);
                return $input;
            }  

            });
           
        </script>

    </body>
</html>